<template>
    <button class="btn"  @click="allowMenuBtn" title="分配菜单"><el-icon><Setting/></el-icon></button>
    <el-dialog v-model="dialogVisible" title="分配菜单对话框" width="30%" @open="openListener">
        <!-- ztree列表 -->
        <el-tree
            ref="treeRef"
            :data="menuList"
            node-key="id"
            show-checkbox
            default-expand-all
            :props="defaultProps"
        />
       <template #footer>
         <span class="dialog-footer">
           <el-button type="primary" @click="confirmBtn">
             确认
           </el-button>
           <el-button type="primary" @click="dialogVisible = false">
             取消 
           </el-button>      
         </span>
       </template>
     </el-dialog>
   
   </template>
   <script>
   import { Setting } from '@element-plus/icons-vue';
    export default {
       name: 'ALLOW_MENU_TREE',
       props:["selection"],
       components:{
        Setting
    },
    data: function(){
       return {
           dialogVisible:false,
           menuList:[],
           defaultProps : {
                children: 'children',
                label: 'label',
            }, 
        formData:{
          roleUuids:"",
          menuCheckIds:"",
          menuHalfIds:""
        }        
       }
    },
       methods:{
        confirmBtn(){
          var that = this;
          that.formData.roleUuids = "";
          this.selection.some((item,index)=>{
            that.formData.roleUuids += item.roleUuid;
            if(index != that.selection.length -1){
              that.formData.roleUuids += ",";
             }
          });
          that.formData.menuCheckIds = this.$refs.treeRef.getCheckedKeys().join(",");
          that.formData.menuHalfIds = this.$refs.treeRef.getHalfCheckedKeys().join(",");
          window.http.post('api/role/saveMenRefRole',that.formData).then(res => {
                    var data = res.data;
                     that.dialogVisible=false;
                     that.$message.success(data.msg);
               })
               .catch(function(error){
                  that.$message.error('服务器异常');
               });
           },   
        allowMenuBtn(){
          if(this.selection.length == 0){
            this.$message.error("请选择角色");
            return;
          }
            this.queryMenuList();
        },
        queryMenuList(){
            var that=this;
            window.http.post('api/role/queryMenuTree',{}).then(res => {
                //  console.info(JSON.stringify(res));{
                    var data = res.data;
                     that.menuList = data;
                     //对话框打开
                     that.dialogVisible=true;
               })
               .catch(function(error){
                  that.$message.error('服务器异常');
               });
        },
        openListener(){
          var that = this;
          if(this.selection.length == 1){
            window.http.post('api/role/queryAllowMenuRst',{roleUuid:this.selection[0].roleUuid}).then(res => {
                    var data = res.data;
                    that.$refs.treeRef.setCheckedKeys(data,false);
                    // that.dialogVisible=true;
               })
          }
          //批量的open事件
          // this.$refs.treeRef.setCheckedKeys(['1111'],true);
        },
       },
       mounted(){
        var that = this;
        this.$bus.on("openAllowMenuDialog",(roleEntity)=>{
          that.queryMenuList();
          that.selection.splice(0,that.selection.length)
          that.selection.push(roleEntity);
        })
       },
       unmounted(){
        this.$bus.off("openAllowMenuDialog");
       },
  
        }
    
   </script>
       <style>
       html,
       body, 
       #app{
       height: 100%;
       }
       </style>
       <style scoped>
       .container {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       width: 100%;
       height: 100%;
   
       }
       .tr{
       width: 200px;
       flex-basis: 50px;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       background-color: beige;
       align-items: center;
       }
       .second{
       background-color: aqua;
       }
       </style>